<template>
  <nav class="navbar" :class="{ 'navbar--scrolled': isScrolled }">
    <div class="navbar__container">
      <div class="navbar__logo">
        <img :src="logo.src" :alt="logo.alt" />
      </div>
      <div class="navbar__tabs">
        <div v-for="(tab, url) in tabs" :key="url" class="navbar__tab"
          :class="{ 'navbar__tab--active': activeTab === url }" @click="setActiveTab(url)">
          <router-link :to="url">{{ tab }}</router-link>
        </div>
      </div>
      <div class="navbar__avatar" @click="toggleMenu" ref="avatarRef">
        <img :src="avatar.src" :alt="avatar.alt" />
        <transition name="fade">
          <div v-if="isMenuOpen" class="navbar__avatar-menu">
            <a href="https://github.com/lyyn-lyyn" target="_blank">GitHub</a>
            <a href="#" @click="logout">Logout</a>
          </div>
        </transition>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'

const tabs = ref({
  "/dailyLog": "Daily Log",
  "/article": "Notes",
  "/health": "Health",
  "/finance": "Finance",
  "/ai-config": "AI Config"
})

const logo = ref({
  src: '/placeholder.svg?height=40&width=40',
  alt: 'Logo'
})

const avatar = ref({
  src: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  alt: 'User Avatar'
})

const isScrolled = ref(false)
const activeTab = ref('')
const isMenuOpen = ref(false)
const avatarRef = ref(null)

const setActiveTab = (url: string) => {
  activeTab.value = url
  console.log(`Navigating to ${url}`)
  isMenuOpen.value = false
}

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
}

const logout = () => {
  console.log('Logging out...')
  isMenuOpen.value = false
}

const handleScroll = () => {
  isScrolled.value = window.scrollY > 50
}

const handleClickOutside = (event: MouseEvent) => {
  if (avatarRef.value && !avatarRef.value.contains(event.target as Node)) {
    isMenuOpen.value = false
  }
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  document.addEventListener('click', handleClickOutside)
  activeTab.value = window.location.pathname
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
  document.removeEventListener('click', handleClickOutside)
})

watch(() => isMenuOpen.value, (newValue) => {
  if (newValue) {
    document.body.style.overflow = 'hidden'
  } else {
    document.body.style.overflow = 'auto'
  }
})
</script>

<style lang="scss" scoped>
$primary-color: #000000;
$secondary-color: #86868b;
$background-color: rgba(255, 255, 255, 0.5);
$hover-color: #0071e3;
$transition-duration: 0.3s;

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: $background-color;
  backdrop-filter: saturate(180%) blur(20px);
  transition: all $transition-duration ease;
  z-index: 1000;

  &--scrolled {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  &__container {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 22px;
  }

  &__logo {
    img {
      width: 40px;
      height: 40px;
      object-fit: contain;
    }
  }

  &__tabs {
    display: flex;
    gap: 32px;
  }

  &__tab {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1;
    transition: color $transition-duration ease;

    a {
      color: $secondary-color;
      text-decoration: none;
      transition: color $transition-duration ease;

      &:hover {
        color: $primary-color;
      }
    }

    &--active {
      a {
        color: $primary-color;
      }
    }
  }

  &__avatar {
    position: relative;
    cursor: pointer;

    img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
    }
  }

  &__avatar-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: $background-color;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 8px 0;
    min-width: 150px;

    a {
      display: block;
      padding: 8px 16px;
      color: $primary-color;
      text-decoration: none;
      font-size: 14px;
      transition: background-color $transition-duration ease;

      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity $transition-duration ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
@media (max-width: 768px) {
  .navbar {
    &__tabs {
      display: none;
    }
  }
}
</style>
